<template>
	<view class="content poRel">
		<view class="wid100 bacFFF">
			<view class="wid90 mar dis disAl disJuB" style="height: 102rpx;">
				<view class="dis disAl borRad40 hei60" style="background: #EEEEEE;width: 553rpx;">
					<view class="dis disJuC" style="width: 13%;">
						<uni-icons type="search" size="35rpx" color="#9C9C9C"></uni-icons>
					</view>
					<input class="wid85 foSi20" v-model="sousuo" @input="sousuoInput" 
						placeholder="请输入订单号查询" placeholder-style="color: #9C9C9C;"/>
				</view>
				<image src="../../static/dateimage.png" style="width: 56rpx;height: 56rpx;"></image>
			</view>
		</view>
		<scroll-view style="height: calc(100vh - 102rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<view style="height: 1rpx;"></view>
			<wsj v-if="list.length == 0" zs='0'></wsj>
			<block v-for="(item,index) in list" :key="index">
				<view class="mar-top30 wid90 mar bacFFF borRad20">
					<view class="wid90 mar">
						<view class="hei80 dis disAl disJuB foSi25">
							<view>订单号：{{item.order_id}}</view>
							<view :style="'color: '+theme.main_color+';'"></view>
						</view>
						<view class="xia"></view>
						<view class="foSi25" style="padding: 30rpx 0;">
							<view class="dis disAl" style="line-height: 44rpx;">
								
								<view class="mar-left10">{{item.trip_start_address}}</view>
							</view>
							<view class="dis disAl mar-top10" style="line-height: 44rpx;">
								
								<view class="mar-left10">{{item.trip_end_address}}</view>
							</view>
							<view class="foSi20 mar-top15" style="color: #737373;">
								<view>出发时间：{{item.serout_time}}</view>
								<view class="mar-top10">到达时间：{{item.arrive_time}}</view>
							</view>
						</view>
						<view class="xia"></view>
						<view class="dis disAl foSi20" style="height: 68rpx;">金额（往返车费）：<span style="color: #FF0000;">{{item.car_price}}元</span></view>
					</view>
				</view>
			</block>
			<view style="height: 50rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import wsj from '../common/w_sj.vue'
	export default {
		components: {
			wsj
		},
		data() {
			return {
				url: this.global.url,
				timer: null,
				sousuo: '',
				xuan: 0,
				last_page: 0,
				page: 1,
				list: [],
				theme: null
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.getList()
		},
		onLoad() {
			this.theme = uni.getStorageSync('theme')
		},
		methods: {
			sousuoInput: function(event) {
				var that = this
				if (that.timer !== null) clearTimeout(that.timer)
				that.timer = setTimeout(() => {
					that.sousuo = event.target.value
					that.list = []
					that.page = 1
					that.getList()
					console.log(that.sousuo)
				}, 500)
			},
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
			getList(){
				var that = this
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/tech/tech_car_price_list',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: uni.getStorageSync('tech_id'),
						order_id:that.sousuo
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.list = that.list.concat(result.data.data)
							that.last_page = result.data.last_page
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}
	.xia{
		height: 1rpx;
		background-color: #E5E5E5;
	}
	.butt1{
		width: 120rpx;
		height: 42rpx;
		color: #8A8A8A;
		border: 1rpx solid #8A8A8A;
		border-radius: 8rpx;
	}
	.butt2{
		width: 120rpx;
		height: 42rpx;
		background-color: #00AD27;
		border: 1rpx solid #00AD27;
		border-radius: 8rpx;
	}
</style>